const path = require("path");
const { merge } = require("webpack-merge");
const common = require("./webpack.common");

const CssMinimizerPlugin = require("css-minimizer-webpack-plugin"); // 压缩CSS
const CopyPlugin = require("copy-webpack-plugin"); // 复制文件或目录插件

module.exports = merge(common, {
  output: {
    // 所有文件的输出目录
    path: path.resolve(__dirname, "../dist"),
    // 入口文件的输出目录，主要是js文件
    filename: "js/[name].[contenthash:6].js",
    // 给打包的其他文件命名(如node_modules和动态引入)
    chunkFilename: "js/[name].chunk.[contenthash:6].js",
    clean: true
  },
  mode: "production",
  optimization: {
    minimizer: [
      "...", // js压缩
      new CssMinimizerPlugin() // 压缩css
    ],
    // 单页面主要打包node_modules的公共代码
    splitChunks: {
      chunks: "all"
    },
    // 为入口文件添加hash值映射rumtime文件，chunk变化这个文件变化而main不会变化
    runtimeChunk: {
      name: entrypoint => `runtime~${entrypoint.name}.js`
    }
  },
  plugins: [
    new CopyPlugin({
      patterns: [
        {
          from: path.resolve(__dirname, "../public"),
          to: path.resolve(__dirname, "../dist"),
          globOptions: {
            ignore: ["**/index.html"]
          }
        }
      ]
    })
  ],
  devtool: "source-map" // 会生成对应的.map映射文件，告诉哪一行哪一列出错
});
